<template>
  <div class="video-list">
    <search-list
      ref="videoList"
      :api-url="$url.WorkVideoList"
      :option="searchOpt"
      :itemPerRow="6"
      @selection-change="selectionChange"
      :beforeQuery="beforeQuery"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="视频图文名称" min-width="200">
        <template slot-scope="scope">
          <el-row :gutter="8">
            <el-col :span="8">
              <img :src="`${scope.row.cover}?x-oss-process=image/resize,w_200,h_200`" />
            </el-col>
            <el-col :span="16">
              <span>{{ scope.row.title }}</span>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="workId" label="视频ID"></el-table-column>
      <el-table-column prop="nickname" label="用户昵称"></el-table-column>
      <el-table-column prop="identified" label="认证信息">
        <template slot-scope="scope">
          {{ $selectFormat['workManageIdentifiedSl'](scope.row.identified).label }}
        </template>
      </el-table-column>
      <el-table-column prop="checked" label="状态">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['checkedSl'](scope.row.checked).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="online" label="上线状态">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['workOnline'](scope.row.online).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="hideRecommend" label="首页推荐">
        <template slot-scope="scope">
          {{ scope.row.hideRecommend === 1 ? '不推荐' : '推荐' }}
        </template>
      </el-table-column>
      <el-table-column prop="channelRecommend" label="子频道加权">
        <template slot-scope="scope">
          {{ scope.row.channelRecommend === 0 ? '不加权' : '加权' }}
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间"></el-table-column>
      <el-table-column prop="updatedAt" label="审核时间"></el-table-column>
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" @click="offLine(scope.row)">强制下线</el-button>
          <el-button type="text" @click="link(scope.row)">链接</el-button>
          <el-button type="text" @click="addComment(scope.row)">评论</el-button>
          <el-button type="text" @click="toRemark(scope.row)">回复评论</el-button>
          <el-button type="text" v-if="scope.row.hideRecommend === 1" @click="recommend(scope.row)">
            推荐
          </el-button>
          <el-button type="text" v-else @click="recommend(scope.row)">不推荐</el-button>
          <el-button type="text" @click="toUserDetail(scope.row)">查看用户</el-button>
          <el-button
            type="text"
            v-if="scope.row.channelRecommend === 0"
            @click="channelRecommend(scope.row)"
          >
            子频道加权
          </el-button>
          <el-button type="text" v-else @click="channelRecommend(scope.row)">
            子频道不加权
          </el-button>
        </template>
      </el-table-column>
      <div slot="btn-after" class="btn-after" slot-scope="scope">
        <el-button
          type="info"
          @click="offLineShow = true"
          :disabled="scope.selectedData.length == 0"
        >
          强制下线
        </el-button>
        <el-button type="primary" @click="batchOnline" :disabled="scope.selectedData.length == 0">
          批量审核
        </el-button>
      </div>
    </search-list>
    <el-dialog title="强制下线原因" :visible="offLineShow" width="500px">
      <el-form>
        <el-form-item>
          <el-input v-model="reason" type="text"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="closeDialog">关 闭</el-button>
        <el-button type="success" @click="saveReason()" icon="el-icon-check">
          保 存
        </el-button>
      </span>
    </el-dialog>
    <el-dialog :visible="linkShow" width="100" :before-close="linkClose">
      <el-form>
        <el-form-item label="链接地址:">
          <div class="urlBox">
            <el-input v-model="pcUrl"></el-input>
            <el-button
              type="success"
              class="copyBtn"
              v-clipboard:copy="pcUrl"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >
              复制
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="Sehema地址:">
          <div class="urlBox">
            <el-input v-model="sehemaUrl"></el-input>
            <el-button
              type="success"
              class="copyBtn"
              v-clipboard:copy="sehemaUrl"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >
              复制
            </el-button>
          </div>
        </el-form-item>
        <!-- <el-form-item label="二维码地址:">
          <div class="urlBox">
            <el-button type="info">下载</el-button>
          </div>
        </el-form-item> -->
      </el-form>
    </el-dialog>
    <comment-dialog
      v-if="showCommentDialog"
      :item="commentItem"
      @close="showCommentDialog = false"
      @success="replySuccess"
    ></comment-dialog>
    <el-dialog :visible="pushDialog" width="100" :before-close="closePush">
      <el-form>
        <el-form-item label="推送方式">
          <el-select v-model="way">
            <el-option
              v-for="(item, index) in wayOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-if="way == 'push'">
          <el-form-item label="标题">
            <el-input v-model="pushForm.title" />
          </el-form-item>
          <el-form-item label="副标题">
            <el-input v-model="pushForm.subtitle" />
          </el-form-item>
          <el-form-item label="推送时间">
            <el-date-picker
              v-model="pushForm.sendDate"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="落地页">
            <el-select v-model="pushForm.scheme">
              <el-option
                v-for="item in urlOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="完整跳转链接">
            <el-input v-model="pushForm.payload" />
          </el-form-item>
        </div>
        <div v-if="way == 'chat'">
          <el-form-item label="消息文案">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="chatForm.content"
            ></el-input>
          </el-form-item>
        </div>
        <div class="btn">
          <el-button type="primary" class="pushBtn" @click="submit">推送</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import CommentDialog from '../../components/CommentDialog.vue';

  export default {
    components: { CommentDialog },
    data() {
      return {
        selectedData: [],
        offLineShow: false,
        linkShow: false,
        showCommentDialog: false,
        commentItem: {},
        reason: '',
        id: '',
        workId: '',
        pcUrl: '',
        sehemaUrl: '',
        jimuUrl: process.env.VUE_APP_JIMU_URL,
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '名称',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'workId',
            label: '视频ID',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'nickname',
            label: '用户昵称',
          },
          {
            type: 'checkedSl',
            name: 'checked',
            label: '状态',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'updatedAt',
            label: '审核时间',
            conf: {
              type: 'datetimerange',
              format: 'yyyy-MM-dd HH:mm:ss',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              'start-placeholder': '审核开始时间',
              'end-placeholder': '审核结束时间',
            },
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'updatedAt_m',
            label: '创建时间',
            conf: {
              type: 'datetimerange',
              format: 'yyyy-MM-dd HH:mm:ss',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              'start-placeholder': '创建开始时间',
              'end-placeholder': '创建结束时间',
            },
          },
        ],
        wayOption: [
          { value: 'push', label: 'push' },
          { value: 'chat', label: '私信通知' },
        ],
        pushForm: {
          title: '',
          subtitle: '',
          sendDate: '',
          scheme: '',
          payload: '',
          audience: '', //推送用户
        },
        chatForm: {
          businessId: '',
          uuid: '', //推送用户
          content: '',
        },
        way: 'push',
        pushDialog: false, //频道推荐弹框
        urlOptions: [
          { value: 'mtjimu://works?id=', label: '作品' },
          { value: 'mtjimu://topic?id=', label: '话题详情' },
          { value: 'mtjimu://opinion?id=', label: '观点详情' },
          { value: 'mtjimu://channel?id=', label: 'tab的频道页' },
          { value: 'mtjimu://subchannel?id=', label: '频道独立页' },
          { value: 'mtjimu://webview?url=', label: 'H5地址' },
        ],
      };
    },
    watch: {
      'pushForm.scheme'() {
        this.urlOptions.map((res) => {
          if (res.label == this.pushForm.scheme) {
            this.pushForm.payload = res.value;
          }
        });
      },
    },
    methods: {
      // 去用户详情
      toUserDetail(row) {
        const { uid } = row;
        this.$tabs.open({ name: 'UserManagerDetail', params: { uuid: uid } });
      },
      //关闭推送
      closePush() {
        this.pushDialog = false;
        Object.keys(this.pushForm).forEach((key) => {
          this.pushForm[key] = '';
        });
        Object.keys(this.chatForm).forEach((key) => {
          this.chatForm[key] = '';
        });
      },
      //提交推送
      submit() {
        console.log(this.way);
        this.way == 'push' ? this.push() : this.chat();
      },
      //推送
      push() {
        this.$service.PushSubmit(this.pushForm).then((res) => {
          this.pushDialog = false;
          this.$message.success('推送成功');
          this.$refs.videoList.getList();
        });
      },
      //私信通知
      chat() {
        this.$service.MessageSendUser({ ...this.chatForm }).then((res) => {
          this.pushDialog = false;
          this.$message.success('私信通知成功');
          this.$refs.videoList.getList();
        });
      },
      //频道推荐
      channelRecommend(row) {
        this.pushForm.audience = row.uid;
        this.chatForm.uuid = row.uid;
        //为0不推荐，走推荐的逻辑
        if (row.channelRecommend == 0) {
          this.$service.WorkRecommendChannelEnable({ id: row.id }).then((res) => {
            this.pushForm.title = '恭喜！你的作品入选了' + res.channelName + '频道';
            this.chatForm.content =
              '亲爱的创作者，恭喜您的作品已入选积幕' +
              res.channelName +
              '子频道！感谢您对积幕平台的支持，期待您更多优秀的作品~';
            this.chatForm.businessId = res.workId;
            this.pushDialog = true;
          });
        } else {
          this.$service.WorkRecommendChannelDisable({ id: row.id }).then((res) => {
            this.$message.success('取消推荐成功');
            this.$refs.videoList.getList();
          });
        }
      },
      // 推荐
      recommend(row) {
        this.$service
          .WorkRecommendToggle({ ids: row.id, hide: Number(!row.hideRecommend) })
          .then((res) => {
            this.$message.success('操作成功');
            this.$refs.videoList.getList();
          });
      },
      batchOnline() {
        this.$service
          .WorkBatchOnline({
            ids: this.selectedData.map((data) => data.id).join(','),
          })
          .then((res) => {
            this.$message.success('批量审核成功');
            this.$refs.videoList.getList();
          });
      },
      beforeQuery({ searchInfo }) {
        // 解决时间筛选点x的时候筛选不了的问题
        if (searchInfo.updatedAt_m === null) {
          searchInfo.startTime = '';
          searchInfo.endTime = '';
        } else {
          searchInfo.startTime = searchInfo.updatedAt_m[0];
          searchInfo.endTime = searchInfo.updatedAt_m[1];
        }
        if (searchInfo.updatedAt === null) {
          searchInfo.updateStartTime = '';
          searchInfo.updateEndTime = '';
        } else {
          searchInfo.updateStartTime = searchInfo.updatedAt[0];
          searchInfo.updateEndTime = searchInfo.updatedAt[1];
        }
      },
      closeDialog() {
        this.offLineShow = false;
      },
      linkClose() {
        this.linkShow = false;
      },
      link(row) {
        this.linkShow = true;
        this.workId = row.workId;
        this.pcUrl = this.jimuUrl + '/works/' + this.workId;
        this.sehemaUrl = 'mtjimu://works?id=' + this.workId;
      },
      detail(row) {
        var operateType = 'detail';
        const { id } = row;
        this.$tabs.open({ name: 'WorkVideoDetail', params: { id, operateType } });
      },
      edit(row) {
        var operateType = 'edit';
        const { id } = row;
        this.$tabs.open({ name: 'WorkVideoDetail', params: { id, operateType } });
      },
      saveReason() {
        if (this.reason == '') {
          this.$message.warning('请输入下线原因');
          return;
        } else {
          this.$service
            .WorkBatchForceOffline({
              ids: this.selectedData.map((data) => data.id).join(',') || this.id,
              reason: this.reason,
            })
            .then((res) => {
              this.offLineShow = false;
              this.$message.success('下线成功');
              this.$refs['videoList'].getList();
              this.selectedData = [];
            });
        }
      },
      saveSingleReason(id) {},
      toRemark(row) {
        var subjectId = row.workId;
        this.$tabs.open({ name: 'AuditComment', params: { subjectId } });
      },
      copy() {},
      selectionChange(val) {
        this.selectedData = [...val];
      },
      offLine(row) {
        this.offLineShow = true;
        this.id = row.id;
      },
      // 复制成功
      onCopy(e) {
        this.$message.success('复制成功');
      },
      // 复制失败
      onError(e) {
        this.$message.warning('复制失败');
      },
      // 添加评论
      addComment(row) {
        this.showCommentDialog = !this.showCommentDialog;
        const { title, workId, workType } = row;
        this.$set(this, 'commentItem', { title, subjectId: workId, subjectType: workType });
      },
      replySuccess() {
        this.$refs.videoList.getList();
      },
    },
  };
</script>
<style lang="less">
  .el-row {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
  }
  .urlBox {
    display: flex;
  }
  .copyBtn {
    margin-left: 20px;
  }
  .btn {
    display: flex;
    justify-content: center;
  }
  .pushBtn {
    width: 100px;
  }
</style>
